<template>
    <div class="box3">
        <div class="tops">
            <el-input placeholder="请输入订单号" class="inptas" v-model="ordersId" @keyup.native.enter="search"></el-input>
            <el-input placeholder="请输入最低价格" class="inptas" v-model="minPrice" @keyup.native.enter="search"></el-input>
            <span class="heng">~</span>
            <el-input placeholder="请输入最高价格" class="inptas" v-model="maxPrice"  @keyup.native.enter="search"></el-input>
          	<el-button type="primary" icon="el-icon-search" class="search" @click="search">搜索</el-button>
        </div>
        <div class="banner">
            <el-table :data="pageTicket" style="width: 100%">
                <el-table-column prop="ordersId" label="订单号">
                </el-table-column>
                <el-table-column prop="wareName" label="商品名称">
                </el-table-column>
                <el-table-column prop="price" label="商品原价">
                </el-table-column>
                <el-table-column prop="vipPrice" label="会员价">
                </el-table-column>
                <el-table-column prop="actPrice" label="实际价格">
                </el-table-column>
                <el-table-column prop="userId" label="用户名">
                </el-table-column>
                <el-table-column prop="outletName" label="门品店">
                </el-table-column>
                <el-table-column prop="userPhone" label="联系方式">
                </el-table-column>
                <el-table-column prop="orderStatusName" label="订单状态">
                  <template slot="header" slot-scope="scope">
                        <el-dropdown @command="siftuser" trigger="click">
                            <span class="el-dropdown-link">
							订单状态<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <!-- <el-dropdown-item command=6>订单状态</el-dropdown-item> -->
                                <el-dropdown-item command=9999>全部</el-dropdown-item>
                                <el-dropdown-item :command='x.orderStatus' v-for="(x,index) in orderStatusList" :key="index">{{ x.orderStatusName }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <template slot-scope="scope">
                        <span v-if="scope.row.orderStatus == 0" style="color: #ff0000;;">待退款</span>
                        <span v-if="scope.row.orderStatus == 1" style="color: #ff0000;">待付款</span>
                        <span v-if="scope.row.orderStatus == 2" style="color: #10dc62;">待收货</span>
                        <span v-if="scope.row.orderStatus == 3" style="color: #10dc62;">已发货</span>
                        <span v-if="scope.row.orderStatus == 4" style="color: #10dc62;">已付款</span>
                        <span v-if="scope.row.orderStatus == 5" style="color: #ff0000;">订单过期</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="更多">
                  <template slot-scope="scope">
                        <el-button :type="scope.row.orderStatus == 4  ? 'primary' : 'info'" 
                            size="small" @click="updateOrders(scope.row)">发货</el-button>
                        <el-button :type="scope.row.orderStatus == 2 || scope.row.orderStatus == 3  ? 'danger' : 'info'" 
                            size="small" @click="refund(scope.row)">退货</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <!--分页-->
            <el-row >
                <el-col >
                    <el-pagination  @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 50, 100]" :page-size="pagesize" layout="prev, pager, next"
                    :total="total"
                    :current-page="currentpage">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      baseUrl:require('../assets/baseUrl').baseUrl,
      total: 0,  //总数据条数
      currentpage: 1,  //当前所在页默认是第一页
      pagesize: 5,  //每页显示多少行数据 默认设置为10
      pageTicket: [],//分页后的当前页数据
      ordersId:"", //订单编号
      minPrice:"", //最小价格
      maxPrice:"", //最大价格
      orderStatusList:[], //订单状态
      orderStatus:9999,
      adminId:0 ///店长编号
    }
  },
  methods: {

    //退货
    refund(v){
        if(v.orderStatus==2){
          this.$http.post(this.baseUrl+"updateOrders",{
          ordersId:v.ordersId,
          orderStatus:0
        }).then(res=>{
        if(res.data.code==200){
          this.$message.success("退货成功")
          if(this.ordersId!="" || this.minPrice!="" || this.maxPrice!=""){
            this.search()
          }else if(this.orderStatus!=""){
            this.searchStatus()
          }else{
            this.getordersList()
          }
        }
        })
      }
    },
    //发货
    updateOrders(v){
      // http://localhost:8081/updateOrders
      if(v.orderStatus==4){
        this.$http.post(this.baseUrl+"updateOrders",{
        ordersId:v.ordersId,
        orderStatus:2
      }).then(res=>{
       if(res.data.code==200){
        this.$message.success("发货成功")
        if(this.ordersId!="" || this.minPrice!="" || this.maxPrice!=""){
          this.search()
        }else if(this.orderStatus!=""){
          this.searchStatus()
        }else{
          this.getordersList()
        }
       }
      })
      }
    },
    search(){
      if(this.ordersId==""){
        this.ordersId=null
      } 
      if(this.minPrice==""){
        this.minPrice=null
      }
      if(this.maxPrice==""){
        this.maxPrice=null
      }
      this.currentpage=1
      this.searchOrders()
    },
    searchOrders(){
      // http://localhost:8081/outsearchOrders
      this.$http.post(this.baseUrl+"outsearchOrders",{
        adminId:this.adminId,
        ordersId:this.ordersId,
        minPrice:this.minPrice,
        maxPrice:this.maxPrice,
        pageIndex:this.currentpage,
        pageSize:this.pagesize
      }).then(res=>{
        this.pageTicket=res.data.data.ordersList
        this.total=res.data.data.pageCount*this.pagesize
      })
    },
    siftuser(v){
      if(v==9999){
        this.currentpage=1
        this.orderStatus=v
        this.getordersList()
      }else{
        this.currentpage=1
        this.orderStatus=v
        this.searchStatus()
      }
      
    },
    //根据订单状态搜索
    searchStatus(){
      // http://localhost:8081/outorderStatus
      this.$http.post(this.baseUrl+"outorderStatus",{
        orderStatus:this.orderStatus,
        pageIndex:this.currentpage,
        pageSize:this.pagesize,
        adminId:this.adminId
      }).then(res=>{
        this.pageTicket=res.data.data.ordersList
        this.total=res.data.data.pageCount*this.pagesize
      })
    },
    handleCurrentChange(v){
      this.currentpage=v
      if(this.ordersId!="" || this.minPrice!="" || this.maxPrice!=""){
        this.searchOrders()
      }else if(this.orderStatus!=9999){
        this.searchStatus()
      }else{
        this.getordersList()
      }
     
    },
    //查看订单状态列表
    // http://localhost:8081/outorderStatusList
    lookorderStatusList(){
      this.$http.post(this.baseUrl+"outorderStatusList",{}).then(res=>{
        this.orderStatusList=res.data.data
      })
    },
    //查找订单列表
    // http://localhost:8081/outordersList
    getordersList(){
      this.$http.post(this.baseUrl+'outordersList',{
        pageIndex:this.currentpage,
        pageSize:this.pagesize,
        adminId:this.adminId
      }).then(res=>{
       this.pageTicket=res.data.data.ordersList
       this.total=res.data.data.pageCount*this.pagesize
      })
    }
  },
  mounted(){
    this.lookorderStatusList()
    this.adminId=sessionStorage.getItem("adminId")
    this.getordersList()
  }
}
</script>
<style lang="less">
.box3{
  .search {
			width:80px;
			height: 40px;
			margin-top: 10px;
			position: relative;
			padding:0px 26px 0 5px;
			.el-icon-search {
				position: absolute;
				top:12px;
				right: 7px;		
				font-size: 17px;
			}
			.el-button--primary>span {
				position: absolute;
				left: 15px;
				top: 35%;
			}
		}
  .tops{

	  width: 80vw;
    height: 65px;
    display: flex;
    line-height: 60px;
    margin-bottom: 15px;
    margin-left: 30px;
	  position: relative;
}
.banner{
    width: 80vw;
    margin-left: 30px;
}
.el-pagination {
 margin-top: 30px;
 text-align: center;

}
.el-input__prefix{
    left: 130px;
	font-size: 24px;
}
.inptas{
  width: 180px;
	margin-right: 10px;
}
.heng{
    height: 65px;
    line-height: 60px;
    font-size: 20px;
    margin-left:10px;
    margin-right: 10px;
}
.cell{
    text-align: center;
    display: flex;
    justify-content: center;
    .el-button--small{
      padding: 7px 10px;
      font-size: 12px;
      border-radius: 3px
    }
}
.btnsa{
	width: 80px;
	height: 40px;
	margin-top: 10px;
	position: relative;
  font-size: 14px;
}
.el-icon-search{
	position: absolute;
	right: 5px;
	top: 20%;
	font-size: 24px;
}
.search>span{
	position: absolute;
	left: 15px;
	top: 35%;
}

}
</style>